<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/checkbox.css">
	<title>XuLuo</title>
	<style>
		/*所需css*/
		.btn{display:inline-block;padding:0 30px;height:36px;line-height:36px;background:#009688;color:#fff;font-size:15px;opacity:0.9;filter:alpha(opacity=90);cursor:pointer;border-radius:2px;}
		.btn:hover{opacity:1;filter:alpha(opacity=100);}
		.btn:active{opacity:0.9;filter:alpha(opacity=90);}
		.default-btn{border:1px solid #C9C9C9;background:#fff;color:#555;}
		.default-btn:hover{border:1px solid #339BC1;}
		.disabled-btn{cursor:not-allowed;border:1px solid #e6e6e6;background:#FBFBFB;color:#C9C9C9;}
		.small-btn{height:30px;line-height:30px;padding: 0 16px;}
		.btn2{display:inline-block;padding:0 30px;height:36px;line-height:36px;font-size:15px;cursor:pointer;border-radius:2px;border: 1px #479bde solid;color: #479bde;}
		.btn2:hover{background: #479bde;color: #fff;}
		a{margin: 10px;}
		label{margin: 0 10px;}
		.gradate{
			background:#46B7DC;
			background:-webkit-linear-gradient(top,#339BC1 0,#4F90E8 100%);
			background:-moz-linear-gradient(top,#339BC1 0,#4F90E8 100%);
			background:-o-linear-gradient(top,#339BC1 0,#4F90E8 100%);
			background:linear-gradient(to bottom,#339BC1 0,#4F90E8 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#339BC1,endColorstr=#4F90E8,GradientType=0);
		}
		/*demo*/
		table {width: 90%; margin: 0 auto; text-align: center; border-collapse: collapse;font-size: 16px;}
		table th,table td {padding:7px; border:1px solid #888; }
	</style>
</head>
<body>
	<table>
		<tr>
			<td width="20%">按钮</td>
			<td>
				<a href="javascript:;" class="btn default-btn">原始按钮</a>
				<a href="javascript:;" class="btn">基本按钮button</a>
				<a href="javascript:;" class="btn" style="background:#339BC1">基本按钮a</a>
				<a href="javascript:;" class="btn disabled-btn">禁用按钮</a>
				<a href="javascript:;" class="btn" style="background:#FF5722">按钮样式</a>
				<a href="javascript:;" class="btn" style="background:#4F90E8">按钮样式二</a>
				<a href="javascript:;" class="btn2">按钮样式三</a><br>
				<a href="javascript:;" class="btn small-btn">小号按钮</a><br><br>
			</td>
		</tr>
		<tr>
			<td>
				复选框<br>单选框
			</td>
			<td>
				<input type="checkbox" class="checkbox">
				<input type="radio" id="radio1" name="sex" class="radio" checked>
				<input type="radio" id="radio2" name="sex" class="radio">
			</td>
		</tr>
		<tr>
			<td>兼容所有浏览器的渐变背景按钮</td>
			<td><a href="" class="btn gradate">渐变按钮</a></td>
		</tr>
		<tr>
			<td>渐变边框</td>
			<td><a href="" class="btn" style="border:5px solid transparent;border-image:linear-gradient(to bottom,#0099CC,#F27280);border-image-slice:1;background:transparent;">渐变边框</a></td>
		</tr>
		<tr>
			<td>渐变背景</td>
			<td><a href="" class="btn" style="border: solid 5px transparent;border-radius:50px;background-image:radial-gradient(circle at 50% 0%, #fff000 50%,#ffcd00 100%),linear-gradient(101deg,#ffc46d,#fa0055);background-origin:border-box;background-clip:padding-box,border-box;text-shadow:0 1px 1px rgba(255, 255, 255, 0.61);box-shadow:inset 0 5px 15px 0 rgba(255, 255, 255, 0.4),inset 0 10px 15px 0 rgba(255, 255, 255, 0.6),0 2px 12px rgba(0, 0, 0, 0.35);">渐变背景</a>

				<a href="" class="btn" style="border: solid 4px transparent;border-radius:50px;background-image:radial-gradient(circle at 10% 30%,#EB3352 20%, #6026E7 50%),linear-gradient(to bottom,#FEF3B6,#E9884D);background-origin:border-box;background-clip:padding-box,border-box;">渐变背景</a>
			</td>
		</tr>
	</body>
	</html>